
$(document).ready(function () {

    var endPointOptions = {
        "url": "http://localhost:9300/GetEmployees",
        type: "GET",
        dataType: 'json',
        timeout: 10000,// load and performance testing LNP
        success: function (data, status, requestObj) {

            //JsonString to javascript object
            //EmpData
            // var empData =     JSON.parse('{ "data" : {"employee" : { "name" : "madhu"}}');
            // javascript object to JsonString
            // empData.data.employee.name

            //  var stringEmpData =  JSON.stringify(empData);
            var employeeList = data.Data.EmployeeList;

            //JSON -- Douglas Crockford

            // data --> Array of objects
            var tableDataString = '';

           //string concatenating we are creating html
            for (var i = 0; i < employeeList.length; i++) {
                tableDataString += '<tr><td>' + (i + 1) + '</td><td>'
                    + employeeList[i].name + '</td><td>' + employeeList[i].title
                    + '</td><td>' + employeeList[i].city + '</td></tr>'
            }


            $('#employeeDetails tbody').append(tableDataString);


        },
        error: function (requestObj, status, error) {

            alert('error happenned');
        },
        complete: function (requestObj, status) {

        }
    };
    // this is the

  var baseUrl =   endPointOptions.url ;

    baseUrl += '?name=madhu&age=33&location=ny';
    endPointOptions.url = baseUrl;
    $.ajax(endPointOptions);


    //load
    $('#btnNavigateUserDetails').click(function(){

       // $('#btnSubmit').length ;// traves

//        $('#userDetails').load("formDirectPost.html #formDetails", function(){
//            $('#displayEmpDetails').hide();
//        });

        $('#userDetails').load("form.html #formDetails", function(){
          //alert('load is completed');
            $('#displayEmpDetails').hide();

            $('#btnSubmit').click(function(event){

                var isFormValid =  validate();
                if(isFormValid){
                    var formData = prepareData();
                    postEndPoint.data = formData;
                    $.ajax(postEndPoint);
                }


                //stopping default browser behavior of form
                event.stopPropagation();
                event.preventDefault();
                return false;
            });



        });
    });

    function validate(){
        var userDetailForm =  $('#userDetailsForm'),isValid = false;
        userDetailForm.validate(

            {
                onsubmit: false,
                highlight: function (element, errorClass) {

                    var parentDiv = $(element).parents('div.control-group');
                    parentDiv.addClass('error');

                },
                unhighlight: function (element, errorClass) {
                    if ($(element).parent().find('.errorMessage').length == 0) {
                        var parentDiv = $(element).parents('div.control-group');
                        parentDiv.removeClass('error');
                    }

                },
                errorPlacement: function (error, element) {

                    var parentDiv = $(element).parents('div.control-group');

                    if (parentDiv.hasClass('disabled')) {
                        parentDiv.removeClass('disabled');
                    }

                    var errorParagraph = $('<p class=errorMessage />');
                    error.appendTo(errorParagraph);
                    if ($(element).parent().find('.errorMessage').length > 0) {
                        $(element).parent().find('.errorMessage').remove();
                    }

                    errorParagraph.insertAfter(element);
                },
                success: function (element) {

                    var parentDiv = $(element).parents('div.control-group');
                    var elementParentDiv = $(element).parents('p');
                    //alert(elementParentDiv.attr('class'));
                    var classList = elementParentDiv.attr('class').split(/\s+/);
                    var removeItem = false;
                    $.each(classList, function (index, item) {
                        //alert(item);
                        //alert(elementParentDiv.attr('class'));
                        if (elementParentDiv.hasClass(item)) {
                            removeItem = true;
                        }
                    });

                    //only remove the element which has error associated with the ID
                    if (removeItem) {
                        elementParentDiv.remove();
                    }

                }
            });


        ValidationRules.addRules();


        if (userDetailForm != null) {
            isValid = userDetailForm.valid();
         }
        return isValid;
    }


    function prepareData(){
        var formData = { };

        formData.name = $('#nameInput').val();
        formData.address = $('#addressInput').val();
        formData.email = $('#emailInput').val();
        formData.phone = $('#phoneInput').val();

        return formData;
    }


    var postEndPoint =  {
        "url": "http://localhost:9300/submitForm",
        type: "POST",

        dataType: 'json',
        timeout: 10000,// load and performance testing LNP
        success: function (data, status, requestObj) {

            alert('message saved successfully ');

        },
        error: function (requestObj, status, error) {

            alert('error happenned');
        },
        complete: function (requestObj, status) {

        }
    };
});